<template>
  <v-container>
    <v-row class="green mt-n3">
      <v-col>
        <v-btn :to="{name:'home'}" class="mx-2" elevation="0" fab outlined x-small color="white">
          <v-icon color="white">mdi-keyboard-backspace</v-icon>
        </v-btn>
      </v-col>
      <v-col>
        <h3 class="d-flex justify-center">点亮城市</h3>
      </v-col>
      <v-col width="100%" height="100%">
        <div class="text-center">
          <v-bottom-sheet v-model="dialog" persistent>
            <template v-slot:activator="{ on }">
              <v-row justify="end">
                <v-icon class="mr-4" v-on="on">mdi-share-variant-outline</v-icon>
              </v-row>
            </template>
            <v-row>
              <v-card class="mx-auto" color="white">
                <div style="width:180px;height:333px">
                  <v-img
                    width="auto"
                    height="auto"
                    max-width="100%"
                    max-height="100%"
                    src="../assets/light1.png"
                  ></v-img>
                </div>
              </v-card>
            </v-row>

            <v-sheet class="center" height="250px">
              <div class="mt-6" @click="dialog = !dialog" style="width:300x;height:250px">
                <v-img
                  width="auto"
                  height="auto"
                  max-width="100%"
                  max-height="100%"
                  src="../assets/light2.jpg"
                ></v-img>
              </div>
            </v-sheet>
          </v-bottom-sheet>
        </div>
      </v-col>
    </v-row>

    <div id="map">
      <iframe
        src="../LightingCity.html"
        scrolling="no"
        style="width: 100%;height: 530px;"
        content="width=device-width,initial-scale=1.0,user-scalable=no,minimum-scale=1.0,maximum-scale=1.0"
        frameborder="0"
      ></iframe>
    </div>

    <!-- <v-row no-gutters>
      <v-col cols="4" sm="4">
        <v-card class="pa-2" outlined tile>
          <p class="font-weight-black text-center">本周排行</p>
          <p class="text-center">1,200/3,000</p>
        </v-card>
      </v-col>
      <v-col cols="4" sm="4">
        <v-card class="pa-2" outlined tile>
          <p class="font-weight-black text-center">累计里程</p>
          <p class="text-center">1,200km</p>
        </v-card>
      </v-col>
      <v-col cols="4" sm="4">
        <v-card class="pa-2" outlined tile>
          <p class="font-weight-black text-center">今日积分</p>
          <p class="text-center">1,200</p>
        </v-card>
      </v-col>
    </v-row>-->
    <v-row no-gutters>
      <v-card outlined tile>
        <!-- 第一行，标题 -->
        <v-row>
          <v-col cols="4" class="d-flex justify-center">
            <router-link :to="{name:''}" style="text-decoration:none">
              <v-btn text class="mb-n4">
                <div class="title">点亮站台</div>
              </v-btn>
            </router-link>
          </v-col>

          <v-col cols="4" class="d-flex justify-center">
            <router-link :to="{name:''}" style="text-decoration:none">
              <v-btn text class="mb-n4">
                <div class="title">累计里程</div>
              </v-btn>
            </router-link>
          </v-col>
          <v-col cols="4" class="d-flex justify-center">
            <router-link :to="{name:''}" style="text-decoration:none">
              <v-btn text class="mb-n4">
                <div class="title">本周排行</div>
              </v-btn>
            </router-link>
          </v-col>
        </v-row>
        <!-- 第二行，数据值 -->
        <v-row>
          <v-col cols="4" class="d-flex justify-center pl-0">
            <v-badge overlap color="success" content="+2" class="mt-3">
              <div class="mt-2">2 个</div>
            </v-badge>
          </v-col>

          <v-col cols="4" class="d-flex justify-center pl-0">
            <v-badge overlap color="success" content="+10" class="mt-3">
              <div class="mt-2">1,200km</div>
            </v-badge>
          </v-col>
          <v-col cols="4" class="d-flex justify-center pl-0">
            <v-badge overlap color="success" content="+2" class="mt-3">
              <div class="mt-2">100/3,000</div>
            </v-badge>
          </v-col>
        </v-row>
      </v-card>
    </v-row>
  </v-container>
</template>
<script>
export default {
  data: () => ({
    dialog: false,
    showb: false,
  }),
};
</script>

 